<script>

  export default {
    props: ['footerHidden','currentPlainIndex','plains'],
    data() {
      return {
        insideIndex:this.currentPlainIndex,
        layerIndex:null,//layer弹出层Index
      }
    },
    methods:{
      /**点击ul里的飞机
       * */
      chooseOnePlain(index){
        this.insideIndex=index;
      },
      /**
       * 成功选择一个飞机
       * */
      submitChoose(index){
        this.$emit('clickCall',this.insideIndex);
        this.closeMorePlains();
      },
      /**
       * 打开弹出层
       */
      openMorePlains(){
        this.layerIndex=layer.open({
          type:1,
          content:$('.szg_plains_box'),
          title:false,
          closeBtn:0
        })
      },
      /**
       * 关闭弹出层
       */
      closeMorePlains(){
        layer.close(this.layerIndex)
      }
    }
  }
</script>
<template>
  <!--选择各种飞机-->
  <div class="szg_morePlains">
    <!--红飞机-->
    <img  @click="openMorePlains" class="szg_plainScore_red_plain animated bounceInLeft" :class="{down:footerHidden}"
         :src="plains[currentPlainIndex].url2" alt="">
    <!--红飞机-->
    <div class="szg_plains_box">
      <div class="szg_plains_box_title"><span>猜你喜欢的超级飞侠</span></div>
      <div class="szg_plains_box_close" @click="closeMorePlains"></div>
      <div class="szg_plains_ul">
        <div class="szg_plains_ul_li" @click="chooseOnePlain(index)" :class="{active:insideIndex===index}" v-for="(item,index) in plains">
          <img :src="item.url1" alt="">
          <div class="szg_plains_ul_li_img_boxshadow"></div>
        </div>
        <div class="szg_plains_submit" @click="submitChoose"></div>
      </div>
    </div>
  </div>

</template>
<style>

</style>
